import Vue from 'vue'
import Router from 'vue-router'

 import promise from '@/components/Promise'
 import storeDemo from '@/components/store/storeDemo'
 import axiosDemo from '@/components/http/axiosDemo'

Vue.use(Router)

const viewRou = [
  {
    path: '',
    redirect: '/home'
  },{
    path: '/home',
    component: () => import('../views/home/home'),
  },
  {
    path: '/promise',
    component: promise
  }, {
    path: '/axiosDemo',
    component: axiosDemo
  },{
    path: '/storeDemo',
    component: storeDemo
  },
  {
    path: '/user/:id',
    component: () => import('../components/user/User'),
  },
  {
    path: '/ceshi',
    component: () => import('../views/ceshi/ceshi'),
    children: [
      {
        path: '', //默认路由
        component: () => import('../components/Message'),
        meta: {
          title: '新闻'
        }
      },
      {
        path: 'message',
        component: () => import('../components/Message'),
        meta: {
          title: '新闻'
        }
      },
      {
        path: 'about',
        component: () => import('../components/About'),
        meta: {
          title: '关于'
        },
        beforeEnter: (to,from,next) =>{
          console.log('路由独享守卫')
          console.log(to.meta.title)
          console.log(from.meta.title)
          next()
        }
      }
    ]
  },{
    path: '/category',
    component: () => import('../views/category/category')
  },{
    path: '/catr',
    component: () => import('../views/catr/catr')
  },{
    path: '/profile/:id',
    component: () => import('../views/profile/profile')
  }
]
const router = new Router({
  routes: viewRou,
  mode: 'history',
  linkActiveClass: 'active',
  base: '/dist/'
})
// 前置守卫
// to  即将要进入的目标 路由对象
// from  当前导航正要离开的路由
router.beforeEach((to,from,next) => {
  console.log('前置守卫')
  console.log(to.meta.title)
  console.log(from.meta.title)
  next()
})
// 后置钩子
router.afterEach((to,from) => {
  console.log('后置钩子')
  console.log(to.meta.title)
  console.log(from.meta.title)
})
export default router
